<template>
    <div>
        <!--加入购物车的小球-->
        <transition
                @before-enter="beforeEnter"
                @enter="enter"
                @after-enter="afterEnter">
            <div class="ball" v-show="ballFlag" ref="ball"></div>
        </transition>

        <!--商品详细页面&#45;&#45;{{ this.$route.params.id }}-->
        <!--轮播图-->
        <div class="mui-card">
            <div class="mui-card-content">
                <!--<img src="../../../images/menu1.png">-->
                <carousel :list="carouselDataList" :isfull="false"></carousel>
            </div>
        </div>

        <!--购买区域-->

        <div class="mui-card">
            <div class="mui-card-header">{{ dataInfo.title }}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p class="price">
                        市场价：<del>￥ {{ dataInfo.market_price }}</del>&nbsp;&nbsp;销售价：<span class="now_price">￥ {{ dataInfo.sell_price }}</span>
                    </p>
                    <p>
                        购买数量：
                        <!--//max属性：设置组件中的最大值为库存值-->
                        <!--getcount:父组件把方法传给子组件，就可以把值返回给父组件-->
                        <number-box :max="dataInfo.stock_quantity" @getcount="getCount"></number-box>

                    </p>
                    <p>
                        <mt-button type="primary" size="small" @click="buy">立即购买</mt-button>
                        <mt-button type="danger" size="small" @click="addToCar">加入购物车</mt-button>
                    </p>
                </div>
            </div>
        </div>


        <!-- 商品参数区域 -->
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货号：{{ dataInfo.goods_no }}</p>
                    <p>库存情况：{{ dataInfo.stock_quantity }} 件</p>
                    <p>上架时间：{{ dataInfo.add_time | dateFormat}}</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <mt-button type="primary" size="large" plain @click="goToGoodsInfo">图文介绍</mt-button>
                <mt-button type="danger" size="large" plain @click="getToGoodsComments">商品评论</mt-button>
            </div>
        </div>
    </div>
</template>

<script>

    //轮播图
    import carousel from "../../subcomponents/Carousel.vue"
    import {Toast} from "mint-ui"
    //number输入框
    import number from  '../../subcomponents/NumberInput.vue'

    export default {
        data(){
            return {
                //当前商品的id
                id : this.$route.params.id,
                //轮播图数据
                carouselDataList:[],
                //参数区数据
                dataInfo:[],
                //小球是否显示
                ballFlag:false,
                //保存购买数量，通过子组件向父组件传值传过来的
                totalCount:1,
            }
        },
        created(){
            //获得轮播图数据，放置到轮播图插件中
            this.getAll();

            //获得参数区数据
            this.getGoodsParam()
        },
        methods:{
            //获得轮播图数据
            getAll(){
                // this.$http.get("api/getthumimages/
                this.$http.get("api/getthumimages/"+ this.id).then(result=>{
                    result = result.body;
                    if(result.status === 0){
                        result.message.forEach(item => {
                            //由于轮播图中需要img属性，所以这里做下转换
                            item.img = item.src;
                        })

                        this.carouselDataList = result.message;
                    }else{//失败
                        Toast("获取轮播图数据失败")
                    }
                });
            },
            //获得商品参数区数据
            getGoodsParam(){
                this.$http.get("api/goods/getinfo/" + this.id).then(result => {
                    if(result.body.status === 0){
                        this.dataInfo = result.body.message[0];
                    }else{
                        Toast("获取商品信息失败!");
                    }
                })
            },
            //立即购买
            buy(){
                Toast("你买不了，哈哈哈哈哈 ");
            },

            //添加至购物车
            addToCar(){
                // Toast("添加到购物车,你还是添加不了 ");
                this.ballFlag = !this.ballFlag;

                //加入购物车时，拼接对象，并调用vue-x方法，存到全局中
                //{id:商品id，num:数量，price:单价，selected:是否选中}
                //如果相同的商品，但是点击多次加入到购物车，应该只是数量改变，而不是创建一个对象
                // var cars = this.$store.state.car;
                var currentGood = {id: this.id, num: this.totalCount, price: this.dataInfo.sell_price, selected: true}
                this.$store.commit("add2Car",currentGood);

                //下面的逻辑去add2Car里处理、更好的分清职责,这样代码干净点
                /*cars.forEach(item =>{
                    if(item.id === this.id){//如果购物车中包含当前商品
                        //只更新其中的数量
                        item.num += this.totalCount;
                    }else{
                        var currentGood = {id: this.id, num: this.totalCount, price: this.dataInfo.sell_price, selected: true}
                        this.$store.commit("add2Car",currentGood);
                    }
                })

                if(cars.length == 0){
                    var currentGood = {id: this.id, num: this.totalCount, price: this.dataInfo.sell_price, selected: true}
                    this.$store.commit("add2Car",currentGood);
                }*/



            },

            //图文介绍
            goToGoodsInfo(){
                //使用编程式路由跳转，name为路由的名称，params为参数
                this.$router.push({
                    name:"goodsinfo",
                    params:{
                        id:this.id
                    }
                })
            },

            //商品评论
            getToGoodsComments(){
                this.$router.push({
                    name:"goodscomment",
                    params:{
                        id:this.id
                    }
                })
            },


            //钩子函数
            beforeEnter(el){
                el.style.transform = "translate(0,0)"
            },
            enter(el,done){
                el.offsetHeight;

                //结束位置
                // el.style.transform = "translate(90px, 230px)"
                let ballPos = this.$refs.ball.getBoundingClientRect();
                let totalPos = document.getElementById("totalnum").getBoundingClientRect();
                let x = totalPos.left - ballPos.left;
                let y = totalPos.top - ballPos.top;
                //https://cubic-bezier.com/获取样式
                el.style.transform = `translate(${x}px, ${y}px)`
                el.style.transition = "all 0.5s cubic-bezier(.6,-0.3,1,.68)";

                //直接调用afterEnter函数
                done();
            },
            afterEnter(el){
                this.ballFlag = !this.ballFlag
            },


            //子组件向父组件传值
            //当在子组件-选择购买数量时，父组件需要获取到购买数量
            getCount(count){//count是子组件的返回值
                this.totalCount = count;
                console.log("子组件的数量是：" + this.totalCount)
            }

        },
        //切记注册！！！！！！！！！！！
        components:{
            carousel,
            "number-box":number
        }
    }
</script>

<style scoped>
    .now_price{
        color: red;
        font-weight: bold;
    }


    /*小球*/

      .ball {
          width: 15px;
          height: 15px;
          border-radius: 50%;
          background-color: red;
          position: absolute;
          z-index: 99;
          top: 390px;
          left: 146px;
      }
</style>